<template>
	<view style="width: 100vw;display: flex;justify-content: center;">
		<view class="bank-card" v-if="bankBool">
			<!-- 银行名称和logo区域 -->
			<view class="card-header">
				<text class="bank-name">{{ bankInfo.bank_name }}</text>
			</view>
		
			<!-- 卡号显示 -->
			<view class="card-number">
				<text class="number-text">{{ bankInfo.bank }}</text>
				<text class="card-type">储蓄卡</text>
			</view>
		
			<!-- 持卡人信息 -->
			<view class="card-footer">
				<view class="info-item">
					<text class="label">持卡人</text>
					<text class="value">{{ bankInfo.real_name }}</text>
				</view>
				<view class="info-item">
					<text class="label">绑定手机</text>
					<text class="value">{{ bankInfo.phone }}</text>
				</view>
			</view>
		
			<!-- 状态标识 -->
			<view v-if="bankInfo.status !== 1" class="status-tag">
				{{ statusMap[bankInfo.status] }}
			</view>
		</view>
	</view>
</template>
<script>
	import baseurl from "@/config.js"
	export default {
		data() {
			return {
				baseurl: '',
				dataList: '',
				bankInfo: {},
				statusMap: {
					1: '正常',
					2: '绑定成功',
				},
				bankUrl:'',
				bankBool:false
			}
		},
		created() {
			this.baseurl = baseurl.app_url;
		},
		filters: {
			filte(value) {
				let lastFourChars = value.substring(value.length - 4);
				return '**** **** **** ' + lastFourChars
			}
		},
		onShow() {
			this.getBankCard()
		},
		// mounted(){
		// 	this.getBankCard()
		// },
		methods: {
			getBankCard() {
				let self = this
				let params = {
					platform: 'alipay'
				}
				self._post('huifu.huiFuBao/getSignDetail', params, function(res) {
					if (res.data.status === 0) {
						// this.bankUrl = res.data.url
						// const link = document.createElement('a');
						console.log(res.data.url)
						uni.navigateTo({
							url:'/pages/user/bind-bank/bind?bankUrl=' +encodeURIComponent(res.data.url),
							
						})
						// link.href = res.data.url;
						// link.click();
					} else {
						self.bankInfo = res.data.detail
						self.bankBool = true
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss"> 
	.bank-card {
		position: relative;
		width: 686rpx;
		background: #0252a2;
		border-radius: 16rpx;
		padding: 32rpx;
		color: #fff;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	/* 银行名称和logo */
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.bank-name {
		font-size: 36rpx;
		font-weight: bold;
	}

	.bank-logo {
		width: 120rpx;
		height: 60rpx;
	}

	/* 卡号区域 */
	.card-number {
		margin-bottom: 80rpx;
	}

	.number-text {
		font-size: 44rpx;
		letter-spacing: 4rpx;
		font-family: monospace;
	}

	.card-type {
		display: block;
		font-size: 28rpx;
		margin-top: 16rpx;
		opacity: 0.9;
	}

	/* 底部信息 */
	.card-footer {
		display: flex;
		justify-content: space-between;
	}

	.info-item {
		.label {
			font-size: 24rpx;
			opacity: 0.8;
			margin-bottom: 8rpx;
		}

		.value {
			font-size: 32rpx;
			letter-spacing: 2rpx;
		}
	}

	/* 状态标签 */
	.status-tag {
		position: absolute;
		top: 32rpx;
		right: -48rpx;
		background: rgba(255, 0, 0, 0.8);
		color: #fff;
		padding: 8rpx 64rpx;
		transform: rotate(45deg);
		font-size: 24rpx;
	}
</style>